<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>收银小票</title>
  <style>
    body {
      font-family: "Microsoft YaHei", Arial, sans-serif;
      margin: 0;
      padding: 0;
      width: 58mm; /* 58mm 小票打印机宽度 */
      box-sizing: border-box;
    }
    
    .receipt {
      padding: 3mm;
      text-align: center;
      width: 100%;
      background-color: white;
    }
    
    @media print {
      @page {
        margin: 0;
        size: 58mm auto;
      }
      
      body {
        width: 58mm;
      }
      
      .receipt {
        width: 100%;
      }
      
      .no-print {
        display: none !important;
      }
    }

    .header {
      margin-bottom: 10px;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
      margin: 5px 0;
    }
    .info {
      font-size: 12px;
      margin: 5px 0;
    }
    .divider {
      border-top: 1px dashed #000;
      margin: 10px 0;
    }
    .items {
      text-align: left;
      font-size: 12px;
    }
    .item {
      margin: 5px 0;
      display: flex;
      justify-content: space-between;
    }
    .total {
      font-size: 14px;
      font-weight: bold;
      margin-top: 10px;
      text-align: right;
    }
    .footer {
      margin-top: 20px;
      font-size: 12px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="receipt">
    <div class="header">
      <div class="title">TimerPOS 计时收银系统</div>
      <div class="info">订单号：<span id="orderNo"></span></div>
      <div class="info">房间：<span id="roomName"></span></div>
      <div class="info">开始时间：<span id="startTime"></span></div>
      <div class="info">结束时间：<span id="endTime"></span></div>
      <div class="info">使用时长：<span id="duration"></span></div>
      <div class="info" id="overtimeInfo" style="display: none">
        超时时长：<span id="overtime"></span>
      </div>
    </div>
    
    <div class="divider"></div>
    
    <div class="items" id="itemsList">
      <!-- 商品列表将在这里动态生成 -->
    </div>
    
    <div class="divider"></div>
    
    <div class="total">
      <div>房间费用：¥<span id="baseFee"></span></div>
      <div id="overtimeFeeInfo" style="display: none">
        超时费用：¥<span id="overtimeFee"></span>
      </div>
      <div>商品费用：¥<span id="snackAmount"></span></div>
      <div id="adjustmentInfo" style="display: none">
        调整金额：¥<span id="adjustment"></span>
        <div class="info">(<span id="adjustRemark"></span>)</div>
      </div>
      <div style="margin-top: 10px">
        应收总计：¥<span id="totalAmount"></span>
      </div>
    </div>
    
    <div class="footer">
      感谢惠顾，欢迎再次光临！
    </div>
  </div>

  <script>
    const { ipcRenderer } = require('electron');
    
    ipcRenderer.on('receipt-data', async (event, data) => {
      console.log('Received receipt data:', data);
      
      try {
        // 渲染数据
        document.getElementById('orderNo').textContent = data.orderNo;
        document.getElementById('roomName').textContent = data.roomName;
        document.getElementById('startTime').textContent = data.startTime;
        document.getElementById('endTime').textContent = data.endTime;
        document.getElementById('duration').textContent = data.duration;
        
        if (data.overtime) {
          document.getElementById('overtimeInfo').style.display = 'block';
          document.getElementById('overtime').textContent = data.overtime;
        }
        
        document.getElementById('baseFee').textContent = data.baseFee.toFixed(2);
        document.getElementById('snackAmount').textContent = data.snackAmount.toFixed(2);
        document.getElementById('totalAmount').textContent = data.totalAmount.toFixed(2);
        
        if (data.adjustment !== 0) {
          document.getElementById('adjustmentInfo').style.display = 'block';
          document.getElementById('adjustment').textContent = data.adjustment.toFixed(2);
          document.getElementById('adjustRemark').textContent = data.adjustRemark || '金额调整';
        }
        
        if (data.overtimeFee > 0) {
          document.getElementById('overtimeFeeInfo').style.display = 'block';
          document.getElementById('overtimeFee').textContent = data.overtimeFee.toFixed(2);
        }
        
        // 生成商品列表
        const itemsList = document.getElementById('itemsList');
        data.snackItems.forEach(item => {
          const div = document.createElement('div');
          div.className = 'item';
          div.innerHTML = `
            <span>${item.snack_name} × ${item.quantity}</span>
            <span>¥${item.subtotal.toFixed(2)}</span>
          `;
          itemsList.appendChild(div);
        });
        
        // 添加打印完成的回调
        window.onafterprint = () => {
          console.log('Printing completed');
        };
        
        // 延迟打印以确保渲染完成
        setTimeout(() => {
          console.log('Triggering print');
          window.print();
        }, 500);
        
      } catch (error) {
        console.error('Error rendering receipt:', error);
        throw error;
      }
    });
  </script>
</body>
</html> 